import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps } from '../../teacher/interface'
import { Space } from 'antd-mobile'

export const ThirdPlatformDetail = (props: SwiperItemProps) => {
    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })

    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>2024</p>
                    <p>平台也在努力提升自己</p>
                    <p>
                        全面升级为<span>7.5</span>版本，上线内容：
                    </p>
                    <Space direction="vertical" style={{ marginTop: '16px', '--gap': '16px' }}>
                        <p>三、用户中心提升：</p>
                        <p>培训机构和讲师个人中心优化</p>
                    </Space>
                </div>
            </div>

            {/* <div className={styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <Space direction="vertical" style={{ '--gap': '16px' }}>
                        <p>四、智能客服上线：</p>
                        <p>智能机器人24小时在线咨询答疑</p>
                        <p>海量常见问题库自助解答</p>
                    </Space>
                </div>
            </div> */}
        </div>
    )
}
